vue在多方法执行完后再执行另一个方法(等待请求完数据再执行)async/await使用方法和Promise.all

您所在的位置:网站首页 vue 方法回调 vue在多方法执行完后再执行另一个方法(等待请求完数据再执行)async/await使用方法和Promise.all

vue在多方法执行完后再执行另一个方法(等待请求完数据再执行)async/await使用方法和Promise.all

2023-10-26 01:22| 来源: 网络整理| 查看: 265

vue在一个方法执行完后执行另一个方法

用Promise.all来实现。 Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况

ES7中新提出async搭配await,建议使用async搭配await。

function fun1(){ return new Promise((resolve, reject) => { /* 你的逻辑代码 */ console.log("1"); }); }, function fun2(){ return new Promise((resolve, reject) => { /* 你的逻辑代码 */ console.log("2"); }); }, function fun3(){ return new Promise((resolve, reject) => { /* 你的逻辑代码 */ console.log("3"); }); }, /* 调用 */ function run(){ Promise.all([ this.fun1(), this.fun2(), this.fun3() ]).then(res => { /* 你的逻辑代码 */ console.log("run"); }) } async/await使用方法 //示例1 async function testSync() { const response = await new Promise(resolve => { setTimeout(() => { resolve("async await test..."); }, 1000); }); console.log(response); } testSync();//async await test... //示例2 async getScheduleList(selectDate) { let response; // 这里request为向服务的发请求的方法 await request(api.getScheduleList, { date: selectDate }).then(res => { response = res; }); return response } init() { this.getScheduleList(selectDate).then(res => { console.log(res) }) } //示例3 swichMenu: async function() { //点击其中一个 menu const num = await getNum() return num } swichMenu().then(res => { console.log(res) })

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3